import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Switch, Link } from 'react-router-dom';
import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

function App() {
  const fn = () => {
    // console.log('--', window.a.b);
    console.log('--', window.aa.cc);

  };
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <button onClick={fn}>Break the world</button>;
        <Router history={history}>
          <>
            <nav>
              <ul>
                <li>
                  <Link to="/">Home</Link>
                </li>
                <li>
                  <Link to="/about">About</Link>
                </li>
                <li>
                  <Link to="/user/1">1</Link>
                </li>
                <li>
                  <Link to="/user/2">2</Link>
                </li>
              </ul>
            </nav>
            <Switch>
              <Router path="/about">
                about
              </Router>
              <Router path="/user/1">
                user1
              </Router>
              <Router path="/user/2">
                user2
              </Router>
              <Router path="/">
                <button onClick={fn}>Break the world</button>
              </Router>
            </Switch>
          </>
        </Router>
      </header>
    </div>
  );
}

export default App;
